{% extends 'article/base.html' %}
{% load static %}
{% block title %}
    article column
{% endblock %}

{% block link %}
     <link rel="stylesheet" href="{% static '/editor/css/editormd.min.css' %}">
{% endblock %}

{% block content %}
    <div style="margin-left: 10px">
        <form class="form-horizontal" action="." method="post">
            {% csrf_token %}

            <div class="row" style="margin-top: 10px;">
                <div class="col-md-2 text-right"><span>标题</span></div>
                <div class="col-md-10 text-left">{{ article_post_form.title }}</div>
            </div>

            <div class="row" style="margin-top:10px;">
                <div class="col-md-2 text-right"><span>栏目：</span></div>
                <div class="col-md-10 text-left">
                    <select id="which_column">
                        {% for column in article_columns %}
                            <option value="{{ column.id }}">{{ column.column }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="row" style="margin-top: 10px;">
                <div class="col-md-2 text-right"><span>内容</span></div>
                <div id="editormd" class="col-md-10 text-left">
                        <textarea style="display:none;" id="id_body"></textarea>
                </div>
            </div>
            <div class="row">
                <input type="button" class="btn btn-primary btn-lg" value="发布" onclick="publish_article()">
            </div>
        </form>
    </div>

{% endblock %}

{% block javascript %}
    <script src="{% static 'editor/editormd.min.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            let editor = editormd("editormd", {
                width: "100%",
                height: 650,
                syncScrolling: "single",
                path: "{% static '/editor/lib/' %}"
            })
        });

        function publish_article() {
            let title = $("#id_title").val();
            let column_id = $("#which_column").val();
            let body = $("#id_body").val();
            $.ajax({
                url: "{% url 'article:article_post' %}",
                type: "POST",
                data: {"title": title, "body": body, "column_id": column_id},
                success: function (e) {
                    if (e == "1") {
                        layer.msg("successful");
                        location.href="{% url 'article:article_list' %}";
                    } else if (e == "2") {
                        layer.msg("Sorry");
                    } else {
                        layer.msg("项目名称必须写，不能为空。");
                    }
                }
            })
        }
    </script>
{% endblock %}